import 'package:flutter/material.dart';
import 'responsive_layout.dart';

/// 响应式内容卡片
/// 根据屏幕尺寸自动调整卡片布局和信息密度
class ResponsiveContentCard extends StatelessWidget {
  /// 内容标题
  final String title;

  /// 内容摘要
  final String? summary;

  /// 内容类型图标
  final IconData? typeIcon;

  /// 内容来源
  final String? source;

  /// 来源图标
  final Widget? sourceIcon;

  /// 缩略图
  final Widget? thumbnail;

  /// 标签列表
  final List<String>? tags;

  /// 创建时间
  final DateTime? createdAt;

  /// 是否收藏
  final bool isFavorite;

  /// 是否已读
  final bool isRead;

  /// AI分析状态图标
  final Widget? aiStatusIcon;

  /// 点击回调
  final VoidCallback? onTap;

  /// 收藏按钮点击回调
  final VoidCallback? onFavoriteToggle;

  /// AI分析按钮点击回调
  final VoidCallback? onAIAnalysis;

  /// 更多操作按钮点击回调
  final VoidCallback? onMoreActions;

  /// 卡片边距
  final EdgeInsets? margin;

  /// 卡片内边距
  final EdgeInsets? padding;

  const ResponsiveContentCard({
    Key? key,
    required this.title,
    this.summary,
    this.typeIcon,
    this.source,
    this.sourceIcon,
    this.thumbnail,
    this.tags,
    this.createdAt,
    this.isFavorite = false,
    this.isRead = false,
    this.aiStatusIcon,
    this.onTap,
    this.onFavoriteToggle,
    this.onAIAnalysis,
    this.onMoreActions,
    this.margin,
    this.padding,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ResponsiveLayout(
      mobile: _buildMobileCard(context),
      tablet: _buildTabletCard(context),
      desktop: _buildDesktopCard(context),
    );
  }

  /// 移动端卡片：垂直布局，信息紧凑
  Widget _buildMobileCard(BuildContext context) {
    return Container(
      margin: margin ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Material(
        borderRadius: BorderRadius.circular(12),
        elevation: 2,
        shadowColor: Colors.black.withOpacity(0.1),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(12),
          child: Container(
            padding: padding ?? const EdgeInsets.all(16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: Theme.of(context).dividerColor.withOpacity(0.2),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 头部信息行
                Row(
                  children: [
                    // 类型图标
                    if (typeIcon != null) ...[
                      Icon(
                        typeIcon,
                        size: 16,
                        color: Theme.of(context).colorScheme.primary,
                      ),
                      const SizedBox(width: 8),
                    ],

                    // 来源信息
                    if (source != null) ...[
                      if (sourceIcon != null) ...[
                        sourceIcon!,
                        const SizedBox(width: 4),
                      ],
                      Text(
                        source!,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                              color: Theme.of(context).colorScheme.outline,
                            ),
                      ),
                      const SizedBox(width: 8),
                    ],

                    // 时间
                    if (createdAt != null) ...[
                      Icon(
                        Icons.schedule,
                        size: 12,
                        color: Theme.of(context).colorScheme.outline,
                      ),
                      const SizedBox(width: 4),
                      Text(
                        _formatTime(createdAt!),
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                              color: Theme.of(context).colorScheme.outline,
                            ),
                      ),
                    ],

                    const Spacer(),

                    // AI状态图标
                    if (aiStatusIcon != null) ...[
                      InkWell(
                        onTap: onAIAnalysis,
                        borderRadius: BorderRadius.circular(16),
                        child: Padding(
                          padding: const EdgeInsets.all(4),
                          child: aiStatusIcon!,
                        ),
                      ),
                      const SizedBox(width: 8),
                    ],

                    // 收藏按钮
                    InkWell(
                      onTap: onFavoriteToggle,
                      borderRadius: BorderRadius.circular(16),
                      child: Padding(
                        padding: const EdgeInsets.all(4),
                        child: Icon(
                          isFavorite ? Icons.favorite : Icons.favorite_border,
                          size: 18,
                          color: isFavorite
                              ? Theme.of(context).colorScheme.error
                              : Theme.of(context).colorScheme.outline,
                        ),
                      ),
                    ),
                  ],
                ),

                const SizedBox(height: 12),

                // 主内容区域
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 文本内容
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 标题
                          Text(
                            title,
                            style: Theme.of(context)
                                .textTheme
                                .titleMedium
                                ?.copyWith(
                                  fontWeight: isRead
                                      ? FontWeight.normal
                                      : FontWeight.w600,
                                  color: isRead
                                      ? Theme.of(context).colorScheme.outline
                                      : Theme.of(context).colorScheme.onSurface,
                                ),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),

                          // 摘要
                          if (summary != null) ...[
                            const SizedBox(height: 8),
                            Text(
                              summary!,
                              style: Theme.of(context)
                                  .textTheme
                                  .bodySmall
                                  ?.copyWith(
                                    color:
                                        Theme.of(context).colorScheme.outline,
                                  ),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ],
                      ),
                    ),

                    // 缩略图
                    if (thumbnail != null) ...[
                      const SizedBox(width: 12),
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: SizedBox(
                          width: 60,
                          height: 60,
                          child: thumbnail!,
                        ),
                      ),
                    ],
                  ],
                ),

                // 标签
                if (tags != null && tags!.isNotEmpty) ...[
                  const SizedBox(height: 12),
                  Wrap(
                    spacing: 6,
                    runSpacing: 6,
                    children: tags!
                        .take(3)
                        .map((tag) => Container(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 8, vertical: 4),
                              decoration: BoxDecoration(
                                color: Theme.of(context)
                                    .colorScheme
                                    .primaryContainer
                                    .withOpacity(0.3),
                                borderRadius: BorderRadius.circular(12),
                              ),
                              child: Text(
                                tag,
                                style: Theme.of(context)
                                    .textTheme
                                    .bodySmall
                                    ?.copyWith(
                                      color:
                                          Theme.of(context).colorScheme.primary,
                                      fontSize: 11,
                                    ),
                              ),
                            ))
                        .toList(),
                  ),
                ],
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 平板端卡片：横向布局，信息更丰富
  Widget _buildTabletCard(BuildContext context) {
    return Container(
      margin: margin ?? const EdgeInsets.all(8),
      child: Material(
        borderRadius: BorderRadius.circular(16),
        elevation: 3,
        shadowColor: Colors.black.withOpacity(0.1),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(16),
          child: Container(
            padding: padding ?? const EdgeInsets.all(20),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              border: Border.all(
                color: Theme.of(context).dividerColor.withOpacity(0.2),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 头部信息行
                Row(
                  children: [
                    // 类型和来源信息
                    Expanded(
                      child: Row(
                        children: [
                          if (typeIcon != null) ...[
                            Icon(
                              typeIcon,
                              size: 18,
                              color: Theme.of(context).colorScheme.primary,
                            ),
                            const SizedBox(width: 8),
                          ],
                          if (source != null) ...[
                            if (sourceIcon != null) ...[
                              sourceIcon!,
                              const SizedBox(width: 6),
                            ],
                            Text(
                              source!,
                              style: Theme.of(context)
                                  .textTheme
                                  .bodyMedium
                                  ?.copyWith(
                                    color:
                                        Theme.of(context).colorScheme.outline,
                                  ),
                            ),
                            const SizedBox(width: 12),
                          ],
                          if (createdAt != null) ...[
                            Icon(
                              Icons.schedule,
                              size: 14,
                              color: Theme.of(context).colorScheme.outline,
                            ),
                            const SizedBox(width: 4),
                            Text(
                              _formatTime(createdAt!),
                              style: Theme.of(context)
                                  .textTheme
                                  .bodyMedium
                                  ?.copyWith(
                                    color:
                                        Theme.of(context).colorScheme.outline,
                                  ),
                            ),
                          ],
                        ],
                      ),
                    ),

                    // 操作按钮组
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        if (aiStatusIcon != null) ...[
                          InkWell(
                            onTap: onAIAnalysis,
                            borderRadius: BorderRadius.circular(20),
                            child: Padding(
                              padding: const EdgeInsets.all(6),
                              child: aiStatusIcon!,
                            ),
                          ),
                          const SizedBox(width: 8),
                        ],
                        InkWell(
                          onTap: onFavoriteToggle,
                          borderRadius: BorderRadius.circular(20),
                          child: Padding(
                            padding: const EdgeInsets.all(6),
                            child: Icon(
                              isFavorite
                                  ? Icons.favorite
                                  : Icons.favorite_border,
                              size: 20,
                              color: isFavorite
                                  ? Theme.of(context).colorScheme.error
                                  : Theme.of(context).colorScheme.outline,
                            ),
                          ),
                        ),
                        const SizedBox(width: 8),
                        if (onMoreActions != null)
                          InkWell(
                            onTap: onMoreActions,
                            borderRadius: BorderRadius.circular(20),
                            child: Padding(
                              padding: const EdgeInsets.all(6),
                              child: Icon(
                                Icons.more_vert,
                                size: 20,
                                color: Theme.of(context).colorScheme.outline,
                              ),
                            ),
                          ),
                      ],
                    ),
                  ],
                ),

                const SizedBox(height: 16),

                // 主内容区域
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 缩略图
                    if (thumbnail != null) ...[
                      ClipRRect(
                        borderRadius: BorderRadius.circular(12),
                        child: SizedBox(
                          width: 100,
                          height: 100,
                          child: thumbnail!,
                        ),
                      ),
                      const SizedBox(width: 16),
                    ],

                    // 文本内容
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 标题
                          Text(
                            title,
                            style: Theme.of(context)
                                .textTheme
                                .titleLarge
                                ?.copyWith(
                                  fontWeight: isRead
                                      ? FontWeight.w500
                                      : FontWeight.w700,
                                  color: isRead
                                      ? Theme.of(context).colorScheme.outline
                                      : Theme.of(context).colorScheme.onSurface,
                                ),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),

                          // 摘要
                          if (summary != null) ...[
                            const SizedBox(height: 12),
                            Text(
                              summary!,
                              style: Theme.of(context)
                                  .textTheme
                                  .bodyMedium
                                  ?.copyWith(
                                    color:
                                        Theme.of(context).colorScheme.outline,
                                  ),
                              maxLines: 3,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ],
                      ),
                    ),
                  ],
                ),

                // 标签
                if (tags != null && tags!.isNotEmpty) ...[
                  const SizedBox(height: 16),
                  Wrap(
                    spacing: 8,
                    runSpacing: 8,
                    children: tags!
                        .map((tag) => Container(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 12, vertical: 6),
                              decoration: BoxDecoration(
                                color: Theme.of(context)
                                    .colorScheme
                                    .primaryContainer
                                    .withOpacity(0.3),
                                borderRadius: BorderRadius.circular(16),
                              ),
                              child: Text(
                                tag,
                                style: Theme.of(context)
                                    .textTheme
                                    .bodySmall
                                    ?.copyWith(
                                      color:
                                          Theme.of(context).colorScheme.primary,
                                      fontWeight: FontWeight.w500,
                                    ),
                              ),
                            ))
                        .toList(),
                  ),
                ],
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 桌面端卡片：网格布局，信息最丰富
  Widget _buildDesktopCard(BuildContext context) {
    return Container(
      margin: margin ?? const EdgeInsets.all(12),
      constraints: const BoxConstraints(
        maxWidth: 400,
        minHeight: 200,
      ),
      child: Material(
        borderRadius: BorderRadius.circular(20),
        elevation: 4,
        shadowColor: Colors.black.withOpacity(0.1),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(20),
          child: Container(
            padding: padding ?? const EdgeInsets.all(24),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                color: Theme.of(context).dividerColor.withOpacity(0.2),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 缩略图（如果有的话，放在顶部）
                if (thumbnail != null) ...[
                  ClipRRect(
                    borderRadius: BorderRadius.circular(16),
                    child: SizedBox(
                      width: double.infinity,
                      height: 140,
                      child: thumbnail!,
                    ),
                  ),
                  const SizedBox(height: 16),
                ],

                // 头部信息行
                Row(
                  children: [
                    if (typeIcon != null) ...[
                      Icon(
                        typeIcon,
                        size: 20,
                        color: Theme.of(context).colorScheme.primary,
                      ),
                      const SizedBox(width: 8),
                    ],

                    if (source != null) ...[
                      if (sourceIcon != null) ...[
                        sourceIcon!,
                        const SizedBox(width: 6),
                      ],
                      Text(
                        source!,
                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                              color: Theme.of(context).colorScheme.primary,
                              fontWeight: FontWeight.w500,
                            ),
                      ),
                    ],

                    const Spacer(),

                    // AI状态和操作按钮
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        if (aiStatusIcon != null) ...[
                          Tooltip(
                            message: 'AI分析',
                            child: InkWell(
                              onTap: onAIAnalysis,
                              borderRadius: BorderRadius.circular(24),
                              child: Padding(
                                padding: const EdgeInsets.all(8),
                                child: aiStatusIcon!,
                              ),
                            ),
                          ),
                          const SizedBox(width: 4),
                        ],
                        Tooltip(
                          message: isFavorite ? '取消收藏' : '收藏',
                          child: InkWell(
                            onTap: onFavoriteToggle,
                            borderRadius: BorderRadius.circular(24),
                            child: Padding(
                              padding: const EdgeInsets.all(8),
                              child: Icon(
                                isFavorite
                                    ? Icons.favorite
                                    : Icons.favorite_border,
                                size: 22,
                                color: isFavorite
                                    ? Theme.of(context).colorScheme.error
                                    : Theme.of(context).colorScheme.outline,
                              ),
                            ),
                          ),
                        ),
                        if (onMoreActions != null) ...[
                          const SizedBox(width: 4),
                          Tooltip(
                            message: '更多操作',
                            child: InkWell(
                              onTap: onMoreActions,
                              borderRadius: BorderRadius.circular(24),
                              child: Padding(
                                padding: const EdgeInsets.all(8),
                                child: Icon(
                                  Icons.more_vert,
                                  size: 22,
                                  color: Theme.of(context).colorScheme.outline,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ],
                    ),
                  ],
                ),

                const SizedBox(height: 16),

                // 标题
                Text(
                  title,
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                        fontWeight: isRead ? FontWeight.w500 : FontWeight.w700,
                        color: isRead
                            ? Theme.of(context).colorScheme.outline
                            : Theme.of(context).colorScheme.onSurface,
                        height: 1.3,
                      ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),

                // 摘要
                if (summary != null) ...[
                  const SizedBox(height: 12),
                  Text(
                    summary!,
                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                          color: Theme.of(context).colorScheme.outline,
                          height: 1.4,
                        ),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],

                const Spacer(),

                // 底部信息
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 标签
                    if (tags != null && tags!.isNotEmpty) ...[
                      const SizedBox(height: 16),
                      Wrap(
                        spacing: 8,
                        runSpacing: 8,
                        children: tags!
                            .take(4)
                            .map((tag) => Container(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 12, vertical: 6),
                                  decoration: BoxDecoration(
                                    color: Theme.of(context)
                                        .colorScheme
                                        .primaryContainer
                                        .withOpacity(0.3),
                                    borderRadius: BorderRadius.circular(16),
                                    border: Border.all(
                                      color: Theme.of(context)
                                          .colorScheme
                                          .primary
                                          .withOpacity(0.2),
                                    ),
                                  ),
                                  child: Text(
                                    tag,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodySmall
                                        ?.copyWith(
                                          color: Theme.of(context)
                                              .colorScheme
                                              .primary,
                                          fontWeight: FontWeight.w600,
                                        ),
                                  ),
                                ))
                            .toList(),
                      ),
                    ],

                    // 时间信息
                    if (createdAt != null) ...[
                      const SizedBox(height: 12),
                      Row(
                        children: [
                          Icon(
                            Icons.schedule,
                            size: 16,
                            color: Theme.of(context).colorScheme.outline,
                          ),
                          const SizedBox(width: 6),
                          Text(
                            _formatTime(createdAt!),
                            style: Theme.of(context)
                                .textTheme
                                .bodySmall
                                ?.copyWith(
                                  color: Theme.of(context).colorScheme.outline,
                                ),
                          ),
                        ],
                      ),
                    ],
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 格式化时间显示
  String _formatTime(DateTime dateTime) {
    final now = DateTime.now();
    final difference = now.difference(dateTime);

    if (difference.inMinutes < 1) {
      return '刚刚';
    } else if (difference.inMinutes < 60) {
      return '${difference.inMinutes}分钟前';
    } else if (difference.inHours < 24) {
      return '${difference.inHours}小时前';
    } else if (difference.inDays < 7) {
      return '${difference.inDays}天前';
    } else {
      return '${dateTime.month}月${dateTime.day}日';
    }
  }
}

/// AI状态指示器组件
class AIStatusIndicator extends StatelessWidget {
  final AIStatus status;
  final double? size;
  final VoidCallback? onTap;

  const AIStatusIndicator({
    Key? key,
    required this.status,
    this.size,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final effectiveSize = size ?? 18.0;

    switch (status) {
      case AIStatus.analyzing:
        return SizedBox(
          width: effectiveSize,
          height: effectiveSize,
          child: CircularProgressIndicator(
            strokeWidth: 2,
            valueColor: AlwaysStoppedAnimation<Color>(
              Theme.of(context).colorScheme.primary,
            ),
          ),
        );

      case AIStatus.completed:
        return Container(
          width: effectiveSize,
          height: effectiveSize,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.primary,
            shape: BoxShape.circle,
          ),
          child: Icon(
            Icons.smart_toy,
            size: effectiveSize * 0.6,
            color: Colors.white,
          ),
        );

      case AIStatus.failed:
        return Container(
          width: effectiveSize,
          height: effectiveSize,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.error,
            shape: BoxShape.circle,
          ),
          child: Icon(
            Icons.error_outline,
            size: effectiveSize * 0.6,
            color: Colors.white,
          ),
        );

      case AIStatus.disabled:
        return Container(
          width: effectiveSize,
          height: effectiveSize,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.outline,
            shape: BoxShape.circle,
          ),
          child: Icon(
            Icons.smart_toy_outlined,
            size: effectiveSize * 0.6,
            color: Colors.white,
          ),
        );
    }
  }
}

/// AI分析状态枚举
enum AIStatus {
  analyzing, // 分析中
  completed, // 分析完成
  failed, // 分析失败
  disabled, // 未启用
}
